<template>
    <div class="process-design" style="display: flex; height:100%">
        <bpmn-process-designer
            v-model="xmlString"
            v-bind="controlForm"
            keyboard
            ref="processDesigner"
            :events="[
                'element.click',
                'connection.added',
                'connection.removed',
                'connection.changed'
            ]"
            @element-click="elementClick"
            @init-finished="initModeler"
            @event="handlerEvent"
            @save="onSaveProcess"
            @saveNew="onSaveProcessNew"
            @back="onBackProcess"
        />
        <bmpn-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" :modelData="modelData"
                            class="process-panel"/>
    </div>
</template>

<script>
    import {BpmnProcessDesigner, BmpnProcessPenal} from '@/plugins/workflow/index'
    // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
    import CustomContentPadProvider from '@/plugins/workflow/designer/plugins/content-pad'
    // 自定义左侧菜单（修改 默认任务 为 用户任务）
    import CustomPaletteProvider from '@/plugins/workflow/designer/plugins/palette'
    // 自定义渲染流程图
    import CustomRenderer from '@/plugins/workflow/designer/plugins/renderer'

    export default {
        name: 'ProcessDesigner',
        props: {
            modelData: {
                type: Object,
                required: true
            }
        },
        components: {
            BpmnProcessDesigner,
            BmpnProcessPenal
        },
        data() {
            return {
                xmlString: this.modelData.bpmnXml,
                modeler: null,
                controlForm: {
                    processId: this.modelData.modelKey || '',
                    processName: this.modelData.modelName || '',
                    simulation: false,
                    labelEditing: false,
                    labelVisible: false,
                    prefix: 'activiti',
                    headerButtonSize: 'small',
                    additionalModel: [CustomContentPadProvider, CustomPaletteProvider, CustomRenderer]
                }
            }
        },
        methods: {
            elementClick(element) {
                this.element = element
            },
            initModeler(modeler) {
                setTimeout(() => {
                    this.modeler = modeler
                }, 10)
            },
            handlerEvent(eventName, element) {
            },
            onSaveProcess(saveData) {
                this.$emit('save', saveData)
            },
            onSaveProcessNew(saveData) {
                this.$emit('saveNew', saveData)
            },
            onBackProcess() {
                this.$emit('back')
            }
        }
    }
</script>
